<template>
    <!-- 备注列表 -->
    <popup ref='remark_popup' @close='closePopup'>
      <view class='remark'>
        <view class='remark_title'>
            <text>备注信息</text>
            <view @tap='close'>关闭</view>
        </view>
        <view class='list_box'>
            <scroll-view class='remark_content' scroll-y='true'>
                <view class='remark_list'>
                    <view v-for='(item,index) in remark_data' :key='index'>
                        【{{item.addOn}}】{{item.remark}}
                    </view>
                </view>
            </scroll-view>
        </view>
        
        <view class='remark_input'>
            <view>
                <input type="text" placeholder="请输入备注" v-model="content">
            </view>
            <button class='btn' hover-class='btn_hover' @tap='addRemark'>提交</button>
        </view>
      </view>
    </popup>
</template>

<script>
    export default {
        data() {
            return {
                focus_status: false,
                content: ""
            }
        },
        computed: {
            status() {
                return this.$store.state.remark_status
            },
            remark_data() {
                return this.$store.state.remark_data
            },
        },
        watch: {
            status(val) {
                if(val) {
                    this.$refs.remark_popup.show()
                }else {
                    this.$refs.remark_popup.close();
                }
            },
        },
        methods: {
            addRemark() {
                if(this.content == "") {
                    uni.showToast({
                        title: '请输入备注信息',
                        icon: "none"
                    });
                    return
                }
                uni.showLoading({
                    title: '正在提交...'
                });
                this.$http({
                    url: this.$api.attention.add_remark,
                    data: {
                        articleId: this.$store.state.article_id,
                        remark: this.content,
                    }
                }).then( res => {
                    uni.hideLoading()
                    if(res.code == 0) {
                        let time = new Date();
                        let obj = {
                            addOn: this.$time(time/1000),
                            remark: this.content,
                        }
                        this.$store.state.remark_data.push(obj);
                        this.content = ""
                    }
                }).catch( err => {
                    uni.hideLoading()
                })
            },
            close() {
                this.$store.state.remark_status = false;
                this.$refs.remark_popup.close();
            },
            closePopup() {
                this.$store.state.remark_status = false;
            }
        }
    }
</script>

<style lang="scss" scoped>
.remark {
    width: 100%;
    background: #fff;
    border-radius: 12upx 12upx 0 0;
    position: relative;
    .remark_title {
        width: 100%;
        height: 96upx;
        background: #fff;
        border-radius: 12upx 12upx 0 0;
        font-size: 34upx;
        color: #333;
        padding: 0 40upx;
        box-sizing: border-box;
        font-weight: 600; 
        border-bottom: 1px solid #f1f1f1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        >view {
            height: 100%;
            font-size: 28upx;
            color: rgba(0,132,255,.7);
            font-weight: 600;
            display: flex;
            align-items: center;
        }
    }
    .list_box {
        padding: 0 0 10upx;
        box-sizing: border-box;
        .remark_content {
            height: 60vh;
            background: #F7F7F7;
            .remark_list {
                width: 100%;
                padding: 20upx 30upx;
                box-sizing: border-box;
                font-size: 24upx;
                color: #333;
                margin: 0;
                >view {
                margin-bottom: 10upx;
                &:nth-last-child(1) {
                    margin: 0;
                }
                }
            }
        }
    }

    .remark_input {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 30upx;
        box-sizing: border-box;
        background:#EEEEEE;
        >view {
            flex: 1;
            height: 60upx;
            background: #fff;
            border-radius: 6upx;
            margin-right: 20upx;
            >input {
            width: 100%;
            height: 100%;
            font-size: 24upx;
            padding: 0 20upx;
            box-sizing: border-box;
            }
        }
        >button {
            width: 96upx;
            height: 60upx;
            border: 1px solid rgba(0,132,255,1);
            border-radius: 6upx;
            font-size: 24upx;
            color: #0084FF;
            background: #fff;
        }
    }
}
</style>